
// 二次封装antd   =>table 表格  =》之间显示后端的数据

import React, { useEffect, useState } from 'react';
import { Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';

interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
}

let listNames = [
    {id:"name",name:"名称"},
    {id:"time",name:"时间"},
    {id:"img",name:"图像"},
    {id:"phone",name:"电话"},
    {id:"keshi",name:"科室"},
    {id:"money",name:"花费"},
    {id:"guohaol",name:"挂号人数"},
    {id:"order",name:"排名"},
]
function   getName(val:any){
   let item:any = listNames.find((itm,index)=>{
    return itm.id==val
   })
    
    
   if(item){
    return item.name
   }
  
}

//不是 多少行  =》 多少列

// 行的数据  =[{name:,age:';}]
// const columns: ColumnsType<DataType> = [
//     {
//       title: 'Name',  //列的名称
//       dataIndex: 'name',  //标识
//       key: 'name', //标识
//       render: (text) => {  //后端给的数据，你是否需要给吧
//         return (
//             <div>
//                 dfdfdfdf
//                 <a>{text}</a>
//             </div>
//         )
//       },  //  这一列渲染的 ，每一行的内容
//     },
//     {
//       title: 'Age',
//       dataIndex: 'age',
//       key: 'age',
//     },
//     {
//       title: 'Address',
//       dataIndex: 'address',
//       key: 'address',
//     },
//     {
//       title: 'Tags',
//       key: 'tags',
//       dataIndex: 'tags',
//       render: (_, { tags }) => (
//         <>
//           {tags.map((tag) => {
//             let color = tag.length > 5 ? 'geekblue' : 'green';
//             if (tag === 'loser') {
//               color = 'volcano';
//             }
//             return (
//               <Tag color={color} key={tag}>
//                 {tag.toUpperCase()}
//               </Tag>
//             );
//           })}
//         </>
//       ),
//     },
//     {
//       title: 'Action',
//       key: 'action',
//       render: (_, record) => (
//         <Space size="middle">
//           <a>Invite {record.name}</a>
//           <a>Delete</a>
//         </Space>
//       ),
//     },
//   ];

// 表格的数据  =》 行 的数据 =》 表头的属性 =》对应上 =》属性就是那一列的属性
const data: DataType[] = [
    {
        key: '1',
        name: '悟空',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tags: ['nice', 'developer'],
    },
    {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['loser'],
    },
    {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sydney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
    },
];
//antd => 表格数据  =》 列和行

// 列与行的关系 =》 一一对应 =》 行中的数据 =》 他是一个对象，对象的属性和列的每一项对应



//分析  使用二次 =》展示的是不同的

// 1我这个 组件 =》 表头动态    内容动态

function Wtable(props: any) {
    // 问题=》 你写项目的组件化  =》 数据获取的速度 ，比 组件渲染的速度慢 =》监听的
    let [columns, setColumns] = useState([])
    useEffect(() => {
        // console.log('触发',props.list);
        if (props.list.length > 0) { // 1 动态的表头  2动态数据
            getColumnsT()
        }

    }, [props.list])

    //动态表头

    // {
    //     img: 'https://img0.baidu.com/it/u=552002180,2081170184&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500',
    //     name: '悟空1',
    //     phone: '1234561',
    //     keshi: '科室1',
    //     'money': '1000',
    //     time: '2023.5.30'
    //   },

    const getColumnsT = () => {
        console.log('触发', props.list); //获取到表头  =》 观察后端的数据，ui图
        // 根据这个属性 =》动态的添加 表头
        //1 获取到对象=》变成数组

        let obj = props.list[0]

        let arrs = Object.keys(obj) //  [img,name]
        console.log(arrs);

        let columnsList: any = []


        //动态的表头 =》 每一行内容不能修改
        arrs.forEach((item, index) => {
            columnsList.push({ // 每一行
                title: getName(item),
                dataIndex: item,
                key: item,
            })
        })

        // console.log(columnsList);
        
        setColumns(columnsList)

    }

    //
    return (
        <div>
            <Table columns={columns} dataSource={props.list} pagination={false} />
        </div>
    )
}


//分析 table => 


//1  完成ui 基本的样式

// 2 根据后端给的数据动态生成 =》表头 =》（表头和后端的数据一一对应 =》自动匹配）

export default Wtable